<template>
	<view class="a-reward">
		<view class="center-bj">
			<uni-nav-bar title="扭蛋机" color="#333" leftIcon="left" backgroundColor="#F0DBB0;" :border="true"
				:statusBar="true" :fixed="true" style="padding-left: 40rpx;">
				<template v-slot:left>
					<view @click="$common.back()">
						<image src="/static/images/back.png" style="width: 32rpx; height: 32rpx"
							mode="scaleToFill" />
					</view>
				</template>
			</uni-nav-bar>
			<view class="header-container">
				<view class="header-container-content" style="width: 290rpx; width: 290rpx;">
					<img :src="boxDetail.box.thumb" class="header-container-content-l"
						style="width: 100%; height: 290rpx;" />
					<view class="header-container-content-r">
						<view class="top">
							<view class="good-name">
								{{boxDetail.box.title}}
							</view>
							<view class="jiage" style="display: flex; align-items: center;">
								<view class="Jg"
									style=" line-height: 40rpx; font-size: 20rpx;width: 120rpx; height: 40rpx; background-color: #F2CB5B; color: aliceblue; text-align: center;">
									单价
								</view>
								<view class="xqnum"
									style=" line-height: 40rpx; font-size: 20rpx;  width: 120rpx; height: 40rpx; background-color: #F88802;  color: aliceblue;text-align: center;">
									￥{{boxDetail.box.price}}/抽
								</view>
							</view>
						</view>
						<view class="center" style="font-size: 20rpx;">
							<view>本池商品具有随机性</view>
							<view>不支持7天无理由退换</view>
						</view>
						<view class="foot" style="display: flex; justify-content: space-around;">
							<view class="gz" @click="checkGz"  style=" border-radius: 10rpx; border: 1px solid #000; line-height: 50rpx; font-size: 20rpx;width: 140rpx; height: 50rpx; background-color: #F25A56; color: aliceblue; text-align: center;" >
								中奖记录
							</view>
							<view class="ZJ" @click="checkZj"  style=" border-radius: 10rpx; border: 1px solid #000; line-height: 50rpx; font-size: 20rpx;width: 140rpx; height: 50rpx; background-color: #F2CB5B; color: aliceblue; text-align: center;">
								规则
							</view>
						</view>
					</view>
				</view>
				<view class="header-container-footer">
				</view>
			</view>
			<view class="two all-bj">
				<view class="content">
					<view class="goods" v-for="(ie,index) in boxDetail.awardList" :key="index">
						<view class="goods-img" style="flex: 1;width: 141rpx;height: 201rpx;">
							<img :src="ie.thumb" style="width: 100%; height: 70%;" />
							<view class="name" style="font-size: 22rpx;">
								{{ie.title}}
							</view>
							<view style="line-height: 1;font-size: 12px;">概率:<text>{{ie.show_rate}}</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="three all-bj"></view>
		</view>
		<view class="footer">
			<view class="fl">
				<image mode="widthFix" src="/static/images/smoke1.png" @click="ClickShowdd(1)" />
				<image mode="widthFix" src="/static/images/smoke3.png" @click="ClickShowdd(3)" />
				<image mode="widthFix" src="/static/images/smoke5.png" @click="ClickShowdd(5)" />
				<image mode="widthFix" src="/static/images/smoke10.png" @click="ClickShowdd(10)" />
			</view>
		</view>

		<!-- 中奖记录 -->
		<u-popup mode="center" border-radius="8" v-model="showRule">
		  <view class="pop-box">
		    <view class="header">
		      <image
		        class="bg"
		        mode="widthFix"
		        src="/static/images/Group 1410105122.png"
		      />
		      <text class="title">中奖记录</text>
		      <image
		        class="gb"
		        src="/static/images/gb.png"
		        @click="showRule = false"
		      />
		    </view>
		    <view class="content" >
				<view class="" style="display: flex; " v-for="(id,index) in allData.list">
					<view class="" style="width: 150rpx; height: 150rpx; background-color: #F2CB5B; margin: 20rpx ;">
						
						
					</view>
					<view class=""  style=" margin: 20rpx;">
						<view class="">
							商品名称:{{id.title}}
						</view>
						<view class="">
							商品价格 :{{id.number}}
						</view>
						<view class="">
							时间:{{id.number}}
						</view>
				</view>				
				</view>
		    </view>
		  </view>
		</u-popup>
		<!-- 规则弹窗 -->
		 <u-popup mode="center" border-radius="8" v-model="showZ">
		   <view class="pop-box">
		     <view class="header">
		       <image
		         class="bg"
		         mode="widthFix"
		         src="/static/images/Group 1410105122.png"
		       />
		       <text class="title">规则</text>
		       <image
		         class="gb"
		         src="/static/images/gb.png"
		         @click="showZ = false"
		       />
		     </view>
		     <view class="content">
		       <rich-text :nodes="rules.editor"></rich-text>
		     </view>
		   </view>
		 </u-popup>
		<!-- 确认订单 -->
		<u-popup mode="center" border-radius="8" v-model="showdd">
			<view class="pop-box">
				<view class="header">
					<image class="bg" mode="widthFix" src="/static/images/Group 1410105122.png" />
					<text class="title">确认订单</text>
					<image class="gb" src="/static/images/gb.png" @click="showdd = false" />
				</view>
				<view class="content">
					<view class="product-exchange-body">
						<view class="product-item">
							<image class="product-image" :src="boxDetail.box.thumb"></image>
							<view class="product-info">
								<view class="product-name">{{ boxDetail.box.title }}</view>
								<view class="product-tip">不支持七天无理由</view>
								<view class="product-price">
									<span>价格：</span>
									¥{{ boxDetail.box.price }}
								</view>
							</view>
							<view class="quantity-control">
								<view class="quantity">X{{ this.num }}</view>
							</view>
						</view>
						<view class="row">
							<view>可用酷玩币：</view>
							<view>{{ userInfo.money }}</view>
						</view>
						<view class="row">
							<view>开启动画：</view>
							<view class="value">
								<image class="switch" @click="toggleAnimate" mode="widthFix"
									:src="`/static/images/switch${showAnimate ? '-act' : ''}.png`" />
							</view>
						</view>
						<view class="agreement" @click="agreement = !agreement">
							<image :src="`/static/images/wxz${agreement ? '-act' : ''}.png`" mode="widthFix" />
							<text>同意《用户隐私协议》</text>
						</view>
					</view>
					<view class="exchange-footer">
						<view class="exchange-total">
							<view class="total-info">
								<view class="total-points">
									合计：
									<text class="points">{{ totalPrice }}酷玩币</text>
								</view>
							</view>
							<view class="confirm-exchange-btn" @click="finalConfirmExchange">
								确认购买
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 抽奖弹窗 -->
		<u-popup mode="center" border-radius="8" v-model="showRecord">
			<view class="pop-box">
				<view class="header">
					<image class="bg" mode="widthFix" src="/static/images/Group 1410105122.png" />
					<text class="title">中奖</text>
					<image class="gb" src="/static/images/gb.png" @click="showRecord = false" />
				</view>
				<view class="content">
					<!-- 		<view class="top_tab">
							<scroll-view class="scroll-X" scroll-x="true">
								<view :class="sgActive == item ? 'tab-a' : 'tab'" v-for="(item, index) in sgTab"
									:key="index" @click="sgTabClick(item)">{{item}}</view>
							</scroll-view>
						</view> -->
					<view class="list-box" v-for="(item, index) in sglist" :key="index">
						<view class="top">
							<image mode="aspectFill" :src="item.user.avatar" />
							<view>{{ item.user.nickName }}</view>
							<text>{{ item.created_time }}</text>
						</view>
						<view class="bottom">
							<image mode="aspectFill" :src="item.thumb" />
							<view class="name">{{ item.title }}</view>
							<view class="lucky">
								<image mode="widthFix" src="/static/images/lucky.png" />
								<text>X{{ item.number }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import {getListBox} from '@/api/getlist';

	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				list: [],
				rules: {},
				num: 0, // 商品数量
				showdd: false,
				currentIndex: 0,
				activeIndex: 0,
				spIndex: 0,
				showRecord: false, // 赏柜记录弹窗
				sgTab: [],
				sgActive: 0, // 默认选中第一个标签
				showRule: false, // 中奖弹窗
				showZ:false,  //规则弹窗
				allData: [], // 存储所有标签的数据
				whitelist: "",
				page: 1,
				perPage: 10,
				DataList: [],
				boxDetail: {
					awardList: [],
					box: {},
				},
				flatList: [],
				tenList: [],
				imageMap: {
					普通款: "ptk",
					欧皇款: "ohk",
					超神款: "csk",
				},
				showAnimate: false,
				agreement: false,
			};
		},
		onLoad(e) {
			this.getRules();
			this.getBoxDetail(e.id);
			this.getzjjl(e.id);
			this.$store.dispatch('getUserInfo');
		},

		computed: {
			...mapGetters(["userInfo"]),
			sglist() {
				// return this.allData.filter(item=>item.label == this.sgActive) || []
				return this.allData;
			},
			latestList() {
				let labels = ["超神款", "欧皇款", "普通款"];
				return (
					this.tenList.filter((item) => item.mark == labels[this.spIndex]) || []
				);
			},
			totalPrice() {
				return this.num * Number(this.boxDetail.box.price);
			},
		},
		methods: {
			toggleAnimate() {
				this.showAnimate = !this.showAnimate;
			},
			checkGz() {
				this.getzjjl();
				this.showRule = true;
			},
			checkZj(){
				this.showZ = true;
			},
			showSg() {
				this.showRecord = true;
			},
			// 标签切换方法
			// sgTabClick(label) {
			//   this.sgActive = label;
			// },
			onSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			onItemClick(index) {
				console.log("点击了第" + index + "个");
			},
			tabClick() {

			},
			imgTab(index) {
				this.spIndex = index;
			},
			getRules() {
				this.$common.getRule(3).then((res) => {
					this.rules = res;
				});
			},
			finalConfirmExchange() {
				if (!this.agreement) {
					uni.showToast({
						title: '请同意用户协议',
						icon: 'none',
					});
					return;
				}
				this.req({
					url: '/v1/box/addOrder',
					data: {
						box_id: this.boxDetail.box.id,
						number: this.num,
						pay_type: 1,
					},
					success: (orderRes) => {
						if (orderRes.code == 200) {
							this.req({
								url: '/v1/box/pay',
								data: {
									order_sn: orderRes.data.order_sn,
								},
								success: (payRes) => {
									if (payRes.code == 200) {
										uni.showToast({
											title: '支付成功',
											icon: 'success',
										});
										this.showdd = false;
										this.getzjjl(e.id);
										this.$store.dispatch('getUserInfo');
									}
								},
							});
						} else {
							uni.showToast({
								title: orderRes.message || '下单失败',
								icon: 'none',
							});
						}
					}
				})
			},
			// 获取盒子详情
			getBoxDetail(id) {
				if (this.isLoading) return;
				this.isLoading = true;
				// Get API parameters based on active navigation type
				const params = this.getApiParams();

				this.req({
					url: "/v1/box/info",
					data: {
						id,
					},
					Loading: false, // 使用自定义loading状态
					success: (res) => {
					    console.log(res)
						this.isLoading = false;
						
						if (res.code == 200) {

							this.boxDetail = res.data;
							this.flatList = res.data.awardList.map((v) => v.list).flat();
						} else {
							// 请求成功但业务失败
							uni.showToast({
								title: res.message || "加载失败",
								icon: "none",
							});
						}
					},
					fail: (err) => {
						this.isLoading = false;
						// 网络请求失败
						uni.showToast({
							title: "网络请求失败，请检查网络",
							icon: "none",
						});

						console.error("网络请求失败:", err);
					},
				});
			},
			// 获取接口type参数
			getTypeParam() {
				// whitelist: 0-推荐, 1-新品, 2-热门, 3-专区
				// API type参数: 推荐不需要传特定值，坑位赏 =1, 无限赏 =2, 扭蛋机=3
				return this.whitelist === 0 ? "2" : String(this.whitelist);
			},

			// 获取API参数
			getApiParams() {
				// 推荐: hot=1, type为空
				// 新品/热门/专区: hot为空, type有对应值
				if (this.whitelist === 0) {
					return {
						hot: "1",
					};
				} else {
					return {
						type: String(this.whitelist),
					};
				}
			},
			// 获取数据接口
			getzjjl(id) {
				this.req({
					url: "/v1/box/log",
					data: {
						box_id: id,
						mark: "",
						label: "",
					},
					Loading: false,
					success: (res) => {
						console.log(res)
						if (res.code == 200) {
							this.sgTab = res.data.labels.map((v) => v.label);
							this.allData = res.data.list;
							this.tenList = res.data.list.slice(0, 10);
							this.sgActive = this.sgTab[0];
							setTimeout(() => {
								console.log("log", this.latestList);
							}, 0);
						}
					},
				});
			},
			// 根据标签ID筛选数据
			ClickShowdd(data) {
				this.num = data;
				this.showdd = true;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.all-bj {}

	.a-reward {
		background-color: #f0dbb0;

		// max-height: 100vh;
		.center-bj {
			// width: 710rpx;
			// height: 1404rpx;
			background: linear-gradient(270deg, #6D4528 0%, #AE712E 6%, #AE712E 95%, #6D4528 100%);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin: 0 29rpx;

			.header-container {
				height: 400rpx;
				padding: 20rpx;
				margin: 0 auto;
				background: url('/static/images/reward/header-bj.png') no-repeat center;

				&-content {
					margin: 35rpx 60rpx;
					display: flex;

					justify-content: space-around;

					&-l {
						flex: 1;
					}

					&-r {
						padding-left: 20rpx;
						flex: 1;

						.top {
							width: 290rpx;
							height: 160rpx;
							background-color: #693307;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.good-name {
								margin-bottom: 28rpx;
								color: #fff;
								font-weight: 700;
							}
						}

						.center {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-bottom: 25rpx;
						}
					}
				}
			}
		}

		.two {
			height: 515rpx;
			background: url('/static/images/reward/two.png') no-repeat center;
			box-sizing: border-box;

			.content {
				width: 100%;
				height: 100%;
				padding: 50rpx;
				padding-top: 66rpx;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;

				.goods {
					background-color: #fff;
					margin-bottom: 10rpx;

					.goods-img {
						.name {
							line-height: 1;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}
				}

			}
		}

		.three {
			height: 438rpx;
			background: url('/static/images/reward/three.png') no-repeat center;
		}

		.content {
			position: relative;
		}

		.header {
			width: 100%;
			padding-left: 40rpx;
			padding-right: 30rpx;
			display: flex;
			align-items: center;
			position: absolute;
			top: 30rpx;
			left: 0;
			z-index: 2;

			.left {
				width: 200rpx;
				height: 240rpx;
				position: relative;

				.img1 {
					width: 200rpx;
					height: 200rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
				}

				.img2 {
					width: 196rpx;
					height: 70rpx;
					position: absolute;
					bottom: 0;
					left: 2rpx;
					z-index: 1;
				}
			}

			// .center {
			// 	flex: 1;
			// 	height: 240rpx;
			// 	display: flex;
			// 	flex-direction: column;
			// 	justify-content: center;
			// 	padding: 0 30rpx;

			// 	.name {
			// 		font-family: PingFang SC, PingFang SC;
			// 		font-weight: 600;
			// 		font-size: 28rpx;
			// 		color: #000000;
			// 		text-align: left;
			// 	}

			// 	.progress {
			// 		margin-top: 20rpx;
			// 		background: #693307;
			// 		border-radius: 9rpx;
			// 		border: 5rpx solid #C48636;
			// 		display: flex;
			// 		align-items: center;
			// 	}

			// 	.tags {
			// 		margin-top: 20rpx;
			// 		display: flex;

			// 		.tag {
			// 			background: #F25A56;
			// 			border-radius: 9rpx;
			// 			width: 88rpx;
			// 			height: 40rpx;
			// 			text-align: center;
			// 			line-height: 40rpx;
			// 			margin-right: 20rpx;
			// 			font-size: 19rpx;
			// 			color: #FFFFFF;
			// 			text-stroke: 2px #1D1D1D;
			// 		}

			// 		.br {
			// 			border: 1px solid #333333;
			// 		}
			// 	}
			// }

			.right {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.goods_box {
			width: 738rpx;
			height: 1070rpx;
			background-image: url(/static/images/box.png);
			background-size: 100%;
			background-repeat: no-repeat;
			position: absolute;
			top: 200rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;

			.content-box {
				width: 100%;
				height: 100%;
				padding: 140rpx 60rpx 90rpx;
				overflow: hidden;
			}

			.grid-container {
				width: 100%;
				height: 100%;
				overflow-y: scroll;
				display: flex;
				flex-wrap: wrap;
			}

			.grid-item {
				width: calc(25% - 8rpx);
				margin: 4rpx;

				.goods {
					width: 100%;
					background: #F8F5E4;
					border: 2rpx solid #473529;
					border-radius: 10rpx;

					.img {
						display: block;
						width: 100%;
						height: 104rpx;
					}

					.info {
						padding: 10rpx;

						.name {
							font-size: 20rpx;
							color: #000000;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.price {
							margin-top: 6rpx;
							font-size: 20rpx;
							color: #000000;
							display: flex;
							justify-content: space-between;
							align-items: center;

							image {
								width: 74rpx;
							}
						}
					}
				}
			}
		}

		.footer {
			width: 738rpx;
			height: 170rpx;
			position: absolute;
			left: 50%;
			bottom: 19%;
			transform: translateX(-43%);

			.fl {
				display: flex;
				align-items: center;
			}

			image {
				width: 22%;
			}
		}

	}

	.uni-nav-bar-text {
		span {
			font-weight: bold !important;
			/* 加粗 */
			color: white !important;
			/* 白色文字 */
			text-shadow: 0 0 1px #000,
				/* 基础描边 */
				0 0 1px #000, 0 0 1px #000,
				-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
		}
	}

	.un-reward {
		background-color: #f0dbb0;
		min-height: 100vh;
		padding: 30rpx 0 200rpx;
	}

	.header {
		height: 840rpx;
		position: relative;

		.swiper {
			width: 100%;
			height: 520rpx;
		}

		.swiper-item {
			width: 70% !important;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: visible;
		}

		.item-content {
			width: 384rpx;
			height: 504rpx;
			transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
			will-change: transform, opacity;
			background-image: url(/static/images/photoframe.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding: 66rpx 72rpx;
			overflow: hidden;
		}

		.item-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.base {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
		}

		.gzfx {
			width: 160rpx;
			height: 52rpx;
			position: absolute;
			top: -20rpx;
			right: 0;
			background-image: url(/static/images/gzfx.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: flex;

			.gz {
				width: 50%;
				height: 52rpx;
			}

			.fx {
				width: 50%;
				height: 52rpx;
			}
		}

		.sx {
			width: 92rpx;
			position: absolute;
			bottom: 210rpx;
			left: 36rpx;
		}

		.sg {
			width: 92rpx;
			position: absolute;
			bottom: 210rpx;
			right: 36rpx;
		}

		.tabs {
			width: 710rpx;
			height: 96rpx;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			padding: 4rpx;
			border-radius: 16rpx;
			border: 4rpx solid #000000;
			display: flex;

			.item {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
				font-weight: bold;
				font-size: 32rpx;
				color: #ffffff;
				text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
					2px 2px 0 #000;
				/* 黑色描边 */
			}

			.active-item {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
				font-weight: bold;
				font-size: 32rpx;
				background-color: #f36058;
				border-radius: 16rpx;
				border: 4rpx solid #1d1d1d;
				color: #ffffff;
				text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
					2px 2px 0 #000;
				/* 黑色描边 */
			}
		}
	}

	.content-card {
		padding: 20rpx;

		.header-box {
			padding: 20rpx 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.img {
				width: 180rpx;
			}

			.text {
				font-family: PingFang SC, PingFang SC;
				font-size: 24rpx;
				color: #1d1d1d;
			}
		}

		.grid-container {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			/* 创建四列，每列宽度相等 */
			gap: 10rpx;
			/* 设置网格之间的间隔 */
		}

		.grid-item {
			margin-top: 10rpx;
		}

		.goods {
			width: 172rpx;
			background: #f8f5e4;
			border: 2rpx solid #473529;
			border-radius: 10rpx;

			.imgthumb {
				width: 164.25rpx;
				height: 140rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}

			.img {
				display: block;
				width: 100%;
			}

			.info {
				padding: 10rpx;

				.name {
					font-size: 20rpx;
					color: #000000;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.price {
					font-size: 20rpx;
					color: #000000;
					font-weight: bold;
					display: flex;
				}
			}
		}
	}

	.record-card {
		padding: 20rpx 30rpx;

		.tips {
			padding: 20rpx 0;
			text-align: center;
			font-size: 20rpx;
			color: #000000;
		}

		.header-box {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.img {
				width: 180rpx;
				opacity: 0.5;
			}

			.active-img {
				width: 180rpx;
				opacity: 1;
			}
		}
	}

	.list-box {
		width: 100%;
		border-radius: 8rpx;
		border: 4rpx solid #1d1d1d;
		margin-top: 30rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				border: 2rpx solid #1d1d1d;
				border-radius: 32rpx;
			}

			view {
				flex: 1;
				margin: 0 20rpx;
				font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
				font-size: 32rpx;
				font-weight: bold;
				color: #ffffff;
				text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
					2px 2px 0 #000;
				/* 黑色描边 */
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-top: 4rpx solid #1d1d1d;

			image {
				width: 68rpx;
				height: 68rpx;
				border: 2rpx solid #1d1d1d;
				border-radius: 10rpx;
			}

			.name {
				flex: 1;
				margin: 0 20rpx;
			}

			.num {
				padding: 6rpx 10rpx;
				background: #1d1d1d;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 2rpx solid #e2b589;
				font-size: 18rpx;
				color: #f9e14f;
			}

			.lucky {
				display: flex;
				align-items: center;

				image {
					width: 88rpx;
					margin-right: 10rpx;
				}

				text {
					font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
					font-size: 24rpx;
					font-weight: bold;
					color: #ffffff;
					text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
						2px 2px 0 #000;
					/* 黑色描边 */
				}
			}
		}
	}

	.footer {
		width: 738rpx;
		height: 170rpx;
		position: fixed;
		left: 50%;
		bottom: 30rpx;
		transform: translateX(-50%);

		.fl {
			display: flex;
			align-items: center;
		}

		image {
			width: 25%;
		}
	}

	.pop-box {
		width: 670rpx;
		background: #f88802;
		border-radius: 10rpx;
		border: 6rpx solid #f88802;

		.header {
			width: 100%;
			height: 112rpx;
			position: relative;

			.bg {
				width: 100%;
			}

			.title {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
				font-weight: bold;
				font-size: 36rpx;
				color: #ffffff;
				text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
					2px 2px 0 #000;
				/* 黑色描边 */
			}

			.gb {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 50%;
				right: 30rpx;
				transform: translateY(-50%);
			}
		}

		.content {
			height: 760rpx;
			background: #eeecd3;
			// padding: 30rpx;
			padding: 14rpx;
			word-wrap: break-word;
			overflow-y: scroll;

			.top_tab {
				width: 100%;
				overflow: hidden;

				.scroll-X {
					white-space: nowrap;
					width: 100%;
				}

				.tab {
					width: 108rpx;
					height: 48rpx;
					line-height: 40rpx;
					text-align: center;
					background-color: #f7b33a;
					border: 4rpx solid #161300;
					border-radius: 12rpx;
					display: inline-block;
					font-size: 22rpx;
					font-weight: bold;
					color: #ffffff;
					text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
						2px 2px 0 #000;
					/* 黑色描边 */
					margin-right: 30rpx;
				}

				.tab-a {
					width: 108rpx;
					height: 48rpx;
					line-height: 40rpx;
					text-align: center;
					background-color: #f16258;
					border: 4rpx solid #161300;
					border-radius: 12rpx;
					display: inline-block;
					font-size: 22rpx;
					font-weight: bold;
					color: #ffffff;
					text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
						2px 2px 0 #000;
					/* 黑色描边 */
					margin-right: 30rpx;
				}
			}
		}
	}

	.product-exchange-body {
		// padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.product-item {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 15rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.product-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx;
		margin-right: 15rpx;
	}

	.product-info {
		flex: 1;
	}

	.product-name {
		color: #333;
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}

	.product-tip {
		font-size: 16rpx;
		margin-bottom: 10rpx;
		color: #333;
	}

	.product-price {
		font-size: 20rpx;
		color: #e74c3c;

		span {
			color: #000;
		}
	}

	.quantity-control {
		display: flex;
		align-items: center;
		position: absolute;
		right: 15rpx;
		top: 15rpx;
	}

	.row {
		color: #333;
		font-size: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		margin-bottom: 20rpx;

		.value {
			font-size: 20rpx;
			display: flex;
			align-items: center;

			.switch {
				width: 73rpx;
				height: 41rpx;
			}
		}
	}

	.agreement {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 240rpx 30rpx 30rpx 30rpx;
		font-size: 24rpx;
		color: #000000;

		image {
			width: 37rpx;
			height: 37rpx;
			margin-right: 10rpx;
		}
	}

	.minus-btn,
	.plus-btn {
		width: 50rpx;
		height: 50rpx;
		background-color: #f0f0f0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		border-radius: 6rpx;
		color: #666;
	}

	.quantity {
		width: 60rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.exchange-rules {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	}

	.rule-title {
		font-size: 28rpx;
		margin-bottom: 15rpx;
		color: #666;
		font-weight: bold;
	}

	.rule-content {
		font-size: 24rpx;
		color: #999;
		line-height: 1.5;
		margin-bottom: 10rpx;
	}

	.exchange-footer {
		padding: 30rpx 0;
	}

	.exchange-total {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 20rpx;
		color: #333;


	}
</style>